<!--
 * @Author: your name
 * @Date: 2021-05-28 14:12:06
 * @LastEditTime: 2021-06-05 16:16:00
 * @LastEditors: YaoXiaoTian
 * @Description: In User Settings Edit
 * @FilePath: \tourismpc\src\views\counsel\components\travel\Travel.vue
-->
<template>
  <div class="strategyTravels">
    <div class="list">
      <div
        class="item"
        v-for="item in collectList"
        :key="item.tourId"
        @click="goDetail(item.tourId)"
      >
        <el-image :src="item.tourTitleImgUrl" />
        <div class="text">{{ item.tourTitle }}</div>
        <div class="bottom">
          <el-avatar :size="30" :src="defaultAvatar"></el-avatar>
          <div class="name">{{ item.publisherName }}</div>
          <div class="right">
            <div>
              <i class="el-icon-chat-dot-square"></i>{{ item.tourComments }}
            </div>
            <div><i class="el-icon-star-off"></i>{{ item.tourCollect }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["collectList"],
  data() {
    return {
      defaultAvatar: require("../../../../assets/imgs/avatar.png"),
    };
  },
  watch: {},
  computed: {},
  methods: {
    goDetail(tourId) {
      this.$router.push({
        path: "/counsel/travel",
        query: {
          tourId,
        },
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less">
.strategyTravels {
  margin: auto;
  width: 1220px;

  .list {
    margin-top: 37px;
    width: 100%;
    display: flex;
    flex-flow: wrap;

    .item {
      width: 282px;
      height: 336px;
      background: #ffffff;
      margin-right: 24px;
      margin-bottom: 28px;
      cursor: pointer;
      border: 1px solid #dddddd;
      & > .el-image {
        width: 100%;
        height: 220px;
        margin-bottom: 29px;
      }

      .text {
        width: 100%;
        margin-bottom: 24px;
        padding: 0 10px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .bottom {
        display: flex;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        width: 100%;

        .name {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          margin-left: 10px;
          width: 100px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .right {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          & > div {
            .el-icon {
              font-size: 19px;
              margin-right: 5px;
            }

            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }

    .item:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
